<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.area {
				background: white;
				width: 416px;
				height: 296px;
				box-sizing: border-box;
				border: 1px solid #dddddd;
				position: absolute;
				/*left: 380px;*/
				top: 20px;
				padding: 5px;
				z-index: 100;
				/*display: none;*/
			}
			
			.area strong {
				display: inline-block;
				float: left!important;
				width: 72px!important;
				height: 25px;
				background: #f6f6f6;
				line-height: 25px;
				text-align: center;
				color: #888888;
				font-size: 11px;
				border: 1px solid #dddddd;
				border-bottom: none;
				position: absolute;
				bottom: 264px;
			}
			
			.area .sit1 {
				background: white;
				height: 26px;
			}
			
			#sas:hover .area {
				display: inline-block;
			}
			
			.area strong a {
				display: inline-block;
				width: 72px!important;
				height: 25px;
			}
			
			.area strong:nth-child(2) {
				margin-left: 79px;
			}
			
			.area hr {
				/*width: 100%;*/
				/*position: absolute;*/
				/*bottom: 264px;*/
				margin-top: 24px;
				background: #dddddd;
				border: 0.5px solid #dddddd;
			}
			
			.area .area-ul1 li i {
				width: 50px;
				height: 16px;
				border-right: 1px dashed #ddd;
			}
			
			.area .area-ul1 li {
				margin-top: 10px;
				font-size: 11px;
			}
			
			.area .area-ul1 {
				margin-top: 16px;
				display: none;
			}
			
			.area .area-ul1 li span {
				display: inline-block;
				width: 44px;
				height: 20px;
				margin-left: 3px;
				line-height: 20px;
				text-align: center;
			}
			
			.area .area-ul2 li span {
				padding: 4px 10px 4px 10px;
				display: inline-block;
				font-size: 11px;
			}
			.box1{
				width: 200px;
				height: 200px;
				background: red;
				display: none;
			}
			#area{
				display: none;
			}
			a{
				position: relative;
			}
			#sas:hover #area{
				display: block;
			}
		</style>
	</head>

	<body>

			<a href="javascript:;" id="sas">重庆
				<div class="area" id="area">
					<strong class="sit1"><a href="javascript:;">重庆</a></strong>
					<strong class="sit2"><a href="javascript:;">渝中区</a></strong>
					<hr/>
					<ul class="area-ul1">
						<li>
							<i>华北：</i>
							<span>北京</span>
							<span>天津</span>
							<span>河北</span>
							<span>山西</span>
							<span>内蒙古</span>

						</li>
						<li>
							<i>华东：</i>
							<span>上海</span>
							<span>江苏</span>
							<span>浙江</span>
							<span>安慰</span>
							<span>福建</span>
							<span>山东</span>
						</li>
						<li>
							<i>华南：</i>
							<span>广东</span>
							<span>广西</span>
							<span>河南</span>

						</li>
						<li>
							<i>华中：</i>
							<span>江西</span>
							<span>河南</span>
							<span>湖北</span>
							<span>湖南</span>

						</li>
						<li>
							<i>西南：</i>
							<span>重庆</span>
							<span>四川</span>
							<span>贵州</span>
							<span>云南</span>
							<span>西藏</span>

						</li>
						<li>
							<i>西北：</i>
							<span>陕西</span>
							<span>甘肃</span>
							<span>青海</span>
							<span>宁夏</span>
							<span>新疆</span>
							<span>山东</span>
						</li>
						<li>
							<i>东北：</i>
							<span>辽宁</span>
							<span>吉林</span>
							<span>黑龙江</span>

						</li>
						<li>
							<i>其他：</i>
							<span>香港</span>
							<span>澳门</span>
							<span>台湾</span>
							<span>钓鱼岛</span>
							<span>南沙群岛</span>

						</li>
					</ul>
					<ul class="area-ul2">
						<li>
							<span>渝中区</span>
							<span>巴南区</span>
							<span>北培区</span>
							<span>万州区</span>
							<span>涪陵区</span>
							<span>万盛区</span>
						</li>
						<li>
							<span>双桥区</span>
							<span>黔江区</span>
							<span>长寿区</span>
							<span>江津区</span>
							<span>合川区</span>
							<span>永川区</span>

						</li>
						<li>
							<span>南川区</span>
							<span>聂江区</span>
							<span>潼南区</span>
							<span>铜梁县</span>
							<span>大足县</span>
							<span>荣昌县</span>
						</li>
						<li>
							<span>璧山县</span>
							<span>梁平县</span>
							<span>城口县</span>
							<span>丰都县</span>
							<span>垫江县</span>
							<span>武隆县</span>
						</li>
						<li>
							<span>秀山</span>
							<span>秋阳</span>
							<span>彭水</span>
							<span>南岸区</span>
							<span>渝北区</span>
							<span>沙坪坝</span>
							<span>大渡口区</span>

						</li>
						<li>
							<span>忠县</span>
							<span>开县</span>
							<span>云阳县</span>
							<span>奉节县</span>
							<span>巫山县</span>
							<span>巫溪县</span>
							<span>石柱</span>

						</li>
						<li>
							<span>九龙坡区</span>
							<span>江北区</span>
						</li>

					</ul>
				</div>
				<!--<div class="box1"></div>-->
			</a>

		<script type="text/javascript">
			var sas=document.getElementById('sas')
			var area1=document.getElementById('area')
			sas.onmouseover=function(){
				console.log(1)
				area1.style.display='block'
				
			}
			sas.onmouseout=function(){
				area1.style.display='none'
			}
		</script>
	</body>

</html>